<template>
  <div class="container" id="map_container" ref="echarts"></div>
</template>

<script setup>
import * as Echarts from 'echarts';
import china from '@/assets/china.json';
import {onMounted, ref} from "vue";

onMounted(()=>{
  initEcharts();
})

const echarts = ref();
const initEcharts = ()=>{
  const charts = Echarts.init(echarts.value);
  const option = {
    backgroundColor:'#0E2152',
    geo:{
      map:'china',
      //图形文本标签
      label:{
        //正常状态下样式
        normal:{
          show: true,
          textStyle:{
            color:'#fff'
          }
        },
        //鼠标放上去后的样式/高亮状态
        emphasis:{
          textStyle: {
            color:'#fff'
          }
        }
      },
      itemStyle:{
        normal: {
          
        }
      }
    }
  }
  Echarts.registerMap('china',china);
  charts.setOption(option);
}

</script>


<style scoped lang="less">
.container{
  width: 100%;
  height: 100%;
}
</style>